<template>
  <Auth
    :authority="['ROLE_ADMIN', 'ROLE_TRANSLATE']"
    :access="$store.state.sys.user.access"
  >
    <Card :padding="0">
      <Table
        :loading="loading"
        :columns="columns"
        :data="data"
        width="100%"
        @on-row-click="toPickView"
      >
        <template #name="{ row }">
          <Avatar icon="ios-person" :src="row.avatar" class="ivu-mr-8" />
          <strong>{{ row.name }}</strong>
        </template>
        <template #image="{ row }">
          <div class="audit-image-box" style="padding: 20px 0">
            <Image
              id="auditImage"
              @click.stop="toPickView(row)"
              lazy
              :src="row.image"
              width="80px"
            />
          </div>
        </template>
        <template #action="{ row }">
          <Button
            @click.stop="toPickView(row)"
            shape="circle"
            size="small"
            type="success"
            class="ivu-mr-8"
            >翻译</Button
          >
        </template>
      </Table>
      <div class="ivu-mt ivu-text-center ivu-mb">
        <Page
          :total="allTranslateNum"
          show-total
          show-elevator
          @on-change="pageChange"
          @on-prev="pageChange"
          @on-next="pageChange"
        />
      </div>

      <Drawer
        :styles="drawstyles"
        title="翻译"
        :closable="true"
        v-model="pickViewModal"
        width="65%"
      >
        <Row :gutter="10" style="justify-content: flex-end">
          <Col
            :span="12"
            style="
              position: absolute;
              left: 0;
              overflow: auto;
              height: calc(100vh - 100px);
            "
          >
            <Image lazy :src="transDrawerData.image"
          /></Col>
          <Col :span="12">
            <Form ref="formDynamic" :model="{ transDrawerForm }">
              <template
                v-for="item in transDrawerForm.orderList"
                :key="item.orderNum"
              >
                <FormItem style="width: 100%" :label="`序号 ${item.orderNum} `">
                  <strong>原文：{{ item.original }}</strong>
                  <Input type="textarea" v-model="item.translation"></Input>
                </FormItem>
              </template>
            </Form>
          </Col>
        </Row>
        <div class="drawer-footer">
          <Button type="primary" @click="handleSubmit('formDynamic')"
            >保存</Button
          >
          <Button @click="handleReset('formDynamic')" style="margin-left: 8px"
            >重置</Button
          >
        </div>
      </Drawer>
    </Card>
    <template #noMatch>
      <Alert type="error">权限不足</Alert>
    </template>
  </Auth>
</template>

<script>
import { post, get } from "@/utils/http";
export default {
  name: "TranslateView",
  data() {
    return {
      allTranslateNum: 0,
      loading: false,
      currentPage: 1,
      pickViewModal: false,
      transDrawerData: "",
      transDrawerForm: {
        orderList: [
          {
            orderNum: "",
            original: "",
            translation: "",
          },
        ],
      },
      imageViewModalLayout: {
        width: "",
        height: "",
      },
      drawstyles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static",
      },
      formDynamic: {
        items: [
          {
            value: "",
            index: 1,
            status: 1,
          },
        ],
      },
      columns: [
        {
          title: "编号",
          key: "pid",
          width: 80,
        },
        {
          title: "用户名",
          slot: "name",
          width: 200,
        },

        {
          title: "序图",
          slot: "image",
        },
        {
          title: "标题",
          key: "title",
          width: 200,
        },
        {
          title: "上传时间",
          key: "time",
          width: 200,
        },
        {
          title: "审核人",
          key: "auditUserName",
          width: 200,
        },
        {
          title: "审核时间",
          key: "auditTime",
          width: "auto",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      data: [],
    };
  },
  mounted() {
    this.getTranslateList();
  },
  methods: {
    // 获取点击翻译后的数据
    async getTranslateOrderList(pid) {
      const res = await get(`getTranslateOrderList.php?pid=${pid}`);
      if (res) {
        this.transDrawerForm.orderList = res;
      }
    },
    async getTranslateList() {
      const res = await get(`getTranslateData.php?page=${this.currentPage}`);
      if (res) {
        this.data = res.translateList;
        this.allTranslateNum = res.allTranslateNum;
      }
    },
    async putTranslateList() {
      const res = await post("putTranslateData.php", {
        handleUser: this.$store.state.sys.user.userId,
        data: this.transDrawerForm,
      });
      if (res) {
        this.data = res.translateList;
        this.allTranslateNum = res.allTranslateNum;
      }
    },
    pageChange(page) {
      this.currentPage = page;

      this.getTranslateList();
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.putTranslateList();

          this.$Message.success("更新成功!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },

    handleRemove(index) {
      this.formDynamic.items[index].status = 0;
    },
    toPickView(row) {
      this.transDrawerForm.pid = row.pid;
      this.transDrawerData = {
        image: row.image,
      };
      this.pickViewModal = !this.pickViewModal;
      this.getTranslateOrderList(row.pid);
    },
  },
};
</script>


<style lang="less">
.vertical-center-modal .ivu-modal {
  top: 0;
  right: 0;
  bottom: 0;
}
</style>
